<template>
    <div class="moban-wrap">
        <div class="moban">
            <div class="moban-title flex">
                <!-- 青岛一家有限公司 -->

                <div style="width: 640px; height: 100%; display: flex; align-items: center" class="line1">
                    {{
                        personalInformation.enterpriseName ||
                        companyInformation.enterpriseFullName ||
                        ""
                    }}
                </div>

            </div>
            <div class="moban-span" v-if="companyInformation.affiliationIndustry ||
                    companyInformation.companySize
                    ">
                <span>
                    <!-- 互联网 -->

                    {{ companyInformation.affiliationIndustry || "" }}
                </span>
                <span>
                    <!-- 20-50人 -->
                    {{
                        companyInformation.companySize
                        ? "·" + companyInformation.companySize
                        : ""
                    }}
                </span>
            </div>
            <cardCarousel v-if="carouselList.length > 0" :carouselList="carouselList" :showNum="5" customWidth="940"
                style="margin-top: 12px;">
            </cardCarousel>
            <div class="moban-main">
                <div class="moban-left" style="white-space: normal;">
                    <div class="moban-tab">
                        <div class="moban-tab-title">
                            <div :class="activeTab == 0 ? 'active' : ''" @click="selectTab(0)">
                                公司简介
                            </div>
                            <div :class="activeTab == 1 ? 'active' : ''" @click="selectTab(1)">
                                公司环境
                            </div>
                            <div :class="activeTab == 2 ? 'active' : ''" @click="selectTab(2)">
                                帮友圈
                            </div>
                        </div>
                    </div>
                    <div v-show="activeTab == 0">
                        <div class="moban-tab-content" v-if="companyProfileData.companyIntroduction ||
                            companyInformation.shopIntroduce ||
                            companyInformation.storeIntroduction
                            ">
                            <pack-up-text :text="companyProfileData.companyIntroduction ||
                                companyInformation.shopIntroduce ||
                                companyInformation.storeIntroduction ||
                                ''
                                " :col="3"></pack-up-text>
                        </div>
                        <div v-if="companyProfileData == '' &&
                            companyInformation == '' &&
                            this.dianpuChage == 1
                            " class="none">
                            <div style="color: #333; text-align: center">
                                该企业暂未填写公司简介
                            </div>
                        </div>
                        <div v-if="dianpuChage == 2">
                            <div class="moban-sub-title">
                                <strong>工商信息</strong>
                            </div>

                            <div class="moban-flex">
                                <div class="flex-4">
                                    <div class="flex flex-direction">
                                        <div class="moban-label">企业名称：</div>
                                        <div class="moban-value">
                                            <!-- 青岛一家有限公司 -->
                                            {{ businessCirclesData.name }}
                                        </div>
                                        <div class="moban-label" style="marign-top: 60px">
                                            企业类型：
                                        </div>
                                        <div class="moban-value">
                                            {{ businessCirclesData.econKind }}
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-3">
                                    <div class="flex flex-direction">
                                        <div class="moban-label">法定代表人：</div>
                                        <div class="moban-value">
                                            {{ businessCirclesData.operName }}
                                        </div>
                                        <div class="moban-label" style="marign-top: 60px">
                                            经营状态：
                                        </div>
                                        <div class="moban-value">
                                            {{ businessCirclesData.status }}
                                        </div>
                                    </div>
                                </div>

                                <div class="flex-2">
                                    <div class="flex flex-direction">
                                        <div class="moban-label">成立时间：</div>
                                        <div class="moban-value">
                                            {{ businessCirclesData.startDate }}
                                        </div>
                                        <div class="moban-label" style="marign-top: 60px">
                                            注册资本：
                                        </div>
                                        <div class="moban-value">
                                            {{ businessCirclesData.registCapi }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="moban-content-wrap">
                                <collapse-transition>
                                    <div v-if="showMoreState" class="moban-content">
                                        <div class="moban-label">所属行业：</div>
                                        <div class="moban-value">
                                            {{ qyxz(businessCirclesData.entType || 1) }}
                                        </div>
                                        <div class="moban-label">所属地区：</div>
                                        <div class="moban-value" v-if="businessCirclesData.area">
                                            {{ businessCirclesData.area.province }}
                                        </div>
                                        <div class="moban-label">统一社会信用代码：</div>
                                        <div class="moban-value">
                                            {{ businessCirclesData.creditCode }}
                                        </div>
                                        <div class="moban-label">工商注册号：</div>
                                        <div class="moban-value">
                                            {{ businessCirclesData.no || "" }}
                                        </div>
                                        <div class="moban-label">经营期限：</div>
                                        <div class="moban-value">
                                            {{ businessCirclesData.teamEnd || "-" }}
                                        </div>
                                        <div class="moban-label">核准日期：</div>
                                        <div class="moban-value">
                                            {{ businessCirclesData.checkDate }}
                                        </div>
                                        <div class="moban-label">登记状态：</div>
                                        <div class="moban-value">
                                            {{ businessCirclesData.status }}
                                        </div>
                                        <div class="moban-label">注册地址：</div>
                                        <div class="moban-value">
                                            {{ businessCirclesData.address }}
                                        </div>
                                        <div class="moban-label">经营范围：</div>
                                        <div class="moban-value">
                                            {{ businessCirclesData.scope }}
                                        </div>
                                    </div>
                                </collapse-transition>
                            </div>
                            <div class="view-more" @click.stop="showMore">
                                {{ showMoreState ? "收起" : "查看更多信息" }}
                                <i :class="'el-icon-arrow-' + (showMoreState ? 'up' : 'down')"></i>
                            </div>
                        </div>

                        <div class="moban-sub-title">
                            <strong>公司地址</strong>
                        </div>
                        <div class="moban-value">
                            {{
                                companyInformation.officeAddress || companyInformation.address || companyInformation.shopAddress
                            }}
                        </div>
                        <div id="containepic-wrap" style="position: relative; margin-top: 24px">
                            <div id="containepic" class="wrapper moban-area"></div>
                            <!-- <div
                  id="custom-control"
                  @click="resetPosition"
                  style="
                    border-radius: 8px;
                    position: absolute;
                    bottom: 20px;
                    right: 20px;
                    background-color: #fff;
                    padding: 4px;
                    cursor: pointer;
                    color: #333;
                  "
                >
                  <img
                    src="@/assets/v3/areacenter.png"
                    alt=""
                    style="height: auto; width: 32px"
                  />
                </div> -->
                        </div>
                    </div>
                    <div v-show="activeTab == 1">
                        <div class="company-list" v-if="companyInformationList.length > 0">
                            <img class="company-img" v-for="(i, j) in companyInformationList" @click="HJViewImage(j)"
                                :key="j" :src="i.environmentalImages" mode="aspectFill" />

                            <div style="height: 120px"></div>
                        </div>
                        <div v-else><el-empty description="暂无数据"></el-empty></div>
                    </div>
                    <div v-show="activeTab == 2" style="white-space: initial;">
                        <div style="margin-bottom: 6px">
                            <friend-item v-for="item in Recommend" :key="item.id" :wrapWidth="640" types="3" :item="item"
                                noGutter @reData="getFriends">
                            </friend-item>
                        </div>
                        <el-empty v-if="Recommend.length == 0" description="还没有发布帮友圈呢">
                        </el-empty>
                    </div>
                </div>
                <div class="moban-right" style="white-space: normal;"
                    :style="carouselList.length <= 0 ? 'margin-top:-140px' : ''">
                    <div style="
            border: 1px solid #dcdcdc;
            padding-right: 20px;
            padding-left: 20px;
            box-sizing: border-content;
            border-radius: 8px 8px 8px 8px;
          ">
                        <!-- <div class="moban-operate">
                            <div class="moban-operate-item" @click.stop="collect(personalInformation, index)">
                                <img :src="personalInformation.whetherCollection == 1
                                    ? 'https://pic.bangbangtongcheng.com/static/ysc.png'
                                    : require('@/assets/shou2.png')
                                    " alt="" />
                                <div class="moban-operate-label">
                                    {{
                                        personalInformation.whetherCollection == 1 ? "已关注" : "关注"
                                    }}
                                </div>
                            </div>
                            <div class="moban-operate-item" @click.stop="shield">
                                <img src="@/assets/v3/resume4.png" alt="" />
                                <div class="moban-operate-label">屏蔽</div>
                            </div>
                        </div> -->
                        <div class="moban-sub-title" style="margin-bottom: 20px;margin-top:24px;">
                            <strong>联系人</strong>
                        </div>
                        <div class="moban-user">
                            <div class="user-left" @click.stop="agentDetailNew(personalInformation)">
                                <img :src="personalInformation.image || defaultAvatar" alt="" />
                                <div class="user-tag">
                                    <!-- 商家 -->
                                    {{
                                        personalInformation.isShop == 1
                                        ? "商家"
                                        : personalInformation.isAgent == 1
                                            ? "经纪人"
                                            : personalInformation.enterpriseRecruitmentStatus == 1
                                                ? "公司"
                                                : "个人"
                                    }}
                                </div>
                            </div>
                            <div class="user-right">
                                <div class="user-name" @click.stop="agentDetailNew(personalInformation)">
                                    {{ personalInformation.nikeName }}
                                </div>
                                <div class="user-company line1" style="width: 240px"
                                    @click.stop="userfy(personalInformation)">
                                    {{ personalInformation.enterpriseName }}
                                </div>
                            </div>
                        </div>

                        <div class="but">
                            <!-- <div class="but_2" @click="chat">
                                <img src="@/assets/weixin_b.png" alt />
                                <p>在线聊天</p>
                            </div>
                            <div class="but_1" @click="mouseoverPhone" v-if="companyInformation.storeContactNumber">
                                <img src="@/assets/dianhua_lan.png" alt />

                                <p>
                                    {{
                                        isShowPhone ? companyInformation.storeContactNumber : "拨打电话"
                                    }}
                                </p>
                            </div> -->
                        </div>
                    </div>
                    <div style="
            margin-top: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            border: 1px solid #dcdcdc;
            padding-left: 20px;
            box-sizing: border-content;
            border-radius: 8px 8px 8px 8px;
          ">
                        <div class="moban-sub-title" style="margin-top: 20px">
                            <strong>在招职位:{{ RecruitmentPositionCount }}个</strong>
                        </div>
                        <div style="cursor: pointer; user-select: none"
                            @click="openUrlb('/invite/invitedetail', { id: item.id })"
                            v-for="(item, index) in RecruitmentPosition" :key="index">
                            <div class="invite-title line1" style="margin-top: 20px">
                                <tag-view :item="item"></tag-view>{{ item.title }}
                            </div>
                            <div class="tag-list line1" v-if="item.fringeBenefits">
                                <div class="tag-item" :key="'item' + index2"
                                    v-for="(item2, index2) in item.fringeBenefits.split(',')">
                                    {{ item2 }}
                                </div>
                            </div>
                            <div class="moban-salary">
                                <template v-if="item.recruitmentType == 1">
                                    <span>
                                        {{ item.salaryRange == "面议" ? "面议" : item.salaryRange + "元" }}

                                    </span>
                                </template>
                                <template v-else>
                                    <span>
                                        {{ item.salaryRange.split(",").join("") }}
                                    </span>
                                    <span class="invite-type" style="font-size: 18px;font-weight: 400;color: #333333;">
                                        <!-- 日结 -->
                                        {{ item.settlementMethod }}
                                    </span>
                                </template>


                            </div>
                            <div class="invite-user-mark">
                                <div class="marks">
                                    <!-- 软件工程师 -->
                                    {{ item.positionCategory }}
                                    <div class="marks-seperate"></div>
                                </div>
                                <div class="marks" v-if="item.educationalRequirements">
                                    <!-- 本科 -->
                                    {{ item.educationalRequirements.split("/").join("/") }}
                                    <div class="marks-seperate"></div>
                                </div>
                                <div class="marks" v-if="item.yearsService">
                                    <!-- 3-5年 -->
                                    {{ item.yearsService }}
                                    <div class="marks-seperate"></div>
                                </div>
                            </div>
                            <div class="seperate pt">
                            </div>
                        </div>

                        <div v-if="RecruitmentPosition.length == 0">
                            <el-empty description="暂无数据"></el-empty>
                        </div>
                        <div class="fenye" style="margin-bottom: 24px">
                            <el-pagination :page-size="pageSize" :current-page="pageNo"
                                @current-change="handlerCurrentChange" layout="prev, pager, next"
                                :total="RecruitmentPositionCount">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <masks ref="binds_shield" :data="personalInformation" :data2="companyInformation"></masks>
        <chat ref="chats"></chat>
    </div>
</template>
  
<script>
import packUpText from "@/views/index/comp/packUpText.vue";
import collapseTransition from "@/utils/collapse-transition";
import cardCarousel from "@/views/invite/comp/cardCarousel.vue";
import masks from "@/views/invite/comp/mask.vue";
import friendItem from "@/views/index/comp/bbcz-friend-circle-item.vue";
import chat from "@/components/chat";
import axios from 'axios'

export default {
    components: {
        packUpText,
        collapseTransition,
        cardCarousel,
        masks,
        friendItem,
        chat,
    },
    computed: {},
    data() {
        return {
            showMoreState: false,
            realHeight: 0,
            item: {},
            list: [
                {
                    id: 0,
                    value: "双休",
                },
                {
                    id: 1,
                    value: "房补",
                },
            ],
            activeTab: 0,
            marks: ["软件工程师", "本科", "3-5年"],
            carouselList: [],
            swiperVideo: [],
            swiperList: [],
            user: {},

            personalInformation: {}, //个人信息
            companyInformation: {}, //公司信息
            companyInformationList: [], //公司环境
            companyProfileData: {}, //公司介绍
            businessCirclesData: {}, //工单信息
            dianpuChage: 0, // 判断是否有店铺1,公司2
            pageNo: 1,
            pageSize: 3,

            pageNo2: 1,
            pageSize2: 3,

            RecruitmentPosition: [], //在招职位
            RecruitmentPositionCount: 0,
            isShowPhone: false,
            Recommend: [],
            RecommendCount: 0,
        };
    },
    methods: {
        async enterShop() {
            if (this.personalInformation.businessType == 1) {
                if (this.companyInformation.shopType == 2) {
                    this.userfy({ id: this.$route.query.userId })

                } else {
                    this.openUrlb("/index/ShopDetails", {
                        id: this.companyInformation.id,
                    });
                }
            } else {
                if (
                    this.companyInformation.storeType == 1 ||
                    this.companyInformation.storeType == 2
                ) {
                    this.openUrlb("/index/newDealerDetails", {
                        id: this.companyInformation.id,
                    });
                } else {
                    this.openUrlb("/index/ownerServiceDetails", {
                        id: this.companyInformation.id,
                    });
                }
            }
        },
        getUser() {
            let user = JSON.parse(localStorage.getItem("userInfo"));
            if (user != null) {
                this.loginstate = true;
                this.user = user;
            } else {
                this.loginstate = false;
            }
        },
        shield() {
            // 屏蔽
            if (!localStorage.getItem("userInfo")) {
                this.myErrorMessage("请先登录!");
                return;
            }
            if (this.personalInformation.id == this.user.id) {
                this.myErrorMessage("不可屏蔽自己!");
                return;
            }
            // this.$refs.mask.open("invite2");

            this.$refs.binds_shield.open("invite6");
        },
        collect(info) {
            this.checkLogin((user) => {
                var param = {
                    collectorId: user.id,
                    collectionType: "8",
                    relationId: info.id,
                    id:
                        info.followCollections &&
                            info.followCollections.id
                            ? info.followCollections.id
                            : "",
                }
                this.$postHttp('/api/mobile/public/favoriteFollowOrCancelFavoriteFollow', param).then(res => {
                    if (res.code == 200) {
                        this.mySuccessMessage(res.msg)
                    }
                })
            })


            // 收藏
        },
        HJViewImage(index) {
            //预览
            this.$hevueImgPreview({
                multiple: true,
                nowImgIndex: index,
                imgList: this.companyInformationList.map(
                    (item) => item.environmentalImages
                ),
            });
        },
        selectTab(i) {
            this.activeTab = i;
            if (i == 2) {
                this.getFriends();
            }
            if (i == 1) {
                // 公司环境
                this.GSpicturesHQ();
            }
        },
        showMore() {
            this.showMoreState = !this.showMoreState;
        },
        chat() {
            this.chatzc(
                this.companyInformation.userId || this.companyInformation.user_id,
                this.personalInformation.id
            );
        },
        mouseoverPhone() {
            this.checkLogin(() => {
                this.isShowPhone = !this.isShowPhone;
                // this.insertCallRecord({
                //   businessType: this.personalInformation.businessType,
                //   userId: this.companyInformation.id,
                //   phone: this.companyInformation.storeContactNumber,
                //   callType: 2
                // });
            });
        },

        getFriends() {
            let that = this;
            let data = {};
            if (
                this.personalInformation.businessType == "0" &&
                this.personalInformation.enterpriseRecruitmentStatus == 1
            ) {
                data = {
                    pageSize: this.pageSize,
                    pageNo: this.pageNo,
                    enterpriseId: this.companyInformation.userId,
                    userId: this.user.id || "",
                    businessType: this.personalInformation.businessType,
                };
            } else {
                data = {
                    pageSize: this.pageSize,
                    pageNo: this.pageNo,
                    storeId: this.companyInformation.id,
                    userId: this.user.id || "",
                    businessType: this.personalInformation.businessType,
                };
            }
            this.$getHttp(
                "/api/mobile/vehicleOwner/getHelpingFriendsCircle",
                data
            ).then((res) => {
                res.helpingFriendsCircle.pageList.forEach((item) => {
                    item.chage = 0;
                    item.picture = this.manageImg(item.picture);
                    item.imageList = this.manageImg(item.picture);
                    item.video = this.manageImg(item.video);
                    console.log("=====>", "item.imageListitem.imageList", item.imageList);
                });
                this.Recommend = res.helpingFriendsCircle.pageList;
                this.RecommendCount = res.helpingFriendsCircle.pageCount;
            });
        },
        getRecruitmentPosition() {
            //在招职位
            this.$getHttp("/api/mobile/personnelOwner/getRecruitmentPosition", {
                userId: this.personalInformation.id,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
            }).then((res) => {
                this.RecruitmentPosition = res.recruitment.pageList;
                this.RecruitmentPositionCount = res.recruitment.pageCount;
            });
        },
        getdynamicList2() {
            this.$getHttp("/mob/user/getArticleInfo", {
                pageSize: "999",
                pageNo: "1",
                businessType: 4,
                shopId: this.companyInformation.id,
                type: "2",
            }).then((res) => {
                res.list.forEach((v) => {
                    if (v.remarks == 2) {
                        this.swiperVideo = v.image;
                    } else {
                        this.carouselList.push({
                            ...v,
                            id: v.id,
                            image: v.image,
                        });
                    }
                });
            });
        },


        resetPosition() {
            var center = new qq.maps.LatLng(
                this.companyInformation.latitude,
                this.companyInformation.longitude
            );

            this.map.panTo(center);
        },
        // 获取定位
        initMap() {
            setTimeout(async () => {
                var that = this;
                var html = "";
                if (!that.companyInformation.latitude) return false
                var center = new qq.maps.LatLng(
                    // that.companyInformation.latitude,
                    // that.companyInformation.longitude
                    // 36.779572,
                    // 119.974598
                    that.companyInformation.latitude,
                    that.companyInformation.longitude
                );

                var map = new qq.maps.Map(document.getElementById("containepic"), {
                    center: center,
                    zoom: 13,
                    disableDefaultUI: true,
                });
                this.map = map;
                var marker = new qq.maps.Marker({
                    position: center,
                    map: map,
                });
                //that.markersArray.push(marker);
                var infoWin = new qq.maps.InfoWindow({
                    map: map,
                });
                html = `<div id="popup" style="text-align:left;white-space:nowrap;margin:10px;color:#333333;font-size:16px;">工作地点：${that.companyInformation.officeAddress ||
                    that.companyInformation.address || that.companyInformation.shopAddress
                    }</div>`;

                infoWin.close(); //先关闭已打开信息窗口
                infoWin.open();
                infoWin.setContent(html);
                infoWin.setPosition(center);

                // 获取标记的点击事件;
                qq.maps.event.addListener(marker, "click", function () {
                    infoWin.close(); //先关闭已打开信息窗口

                    infoWin.open(); //再打开 并赋给新的值
                    infoWin.setContent(html);
                    infoWin.setPosition(center);
                });

                let data = {
                    key: "ZYIBZ-6VVRW-NCURN-O6GZO-2VRAH-KIBJV",
                    output: "jsonp",
                };

                function CustomZoomControl(controlDiv, map) {
                    controlDiv.style.margin = "0 20px 20px 0";
                    controlDiv.style.backgroundColor = "#FFFFFF";
                    controlDiv.style.borderRadius = "8px";
                    controlDiv.style.padding = "4px";
                    controlDiv.style.backgroundColor = "#FFFFFF";
                    controlDiv.style.color = "#333";
                    controlDiv.style.cursor = "pointer";

                    let img = document.createElement("img");
                    img.src = require("@/assets/v3/areacenter.png");
                    img.style.height = "auto";
                    img.style.width = "32px";
                    controlDiv.appendChild(img);
                    controlDiv.index = 1; //设置在当前布局中的位置

                    function update() {
                        map.panTo(center);
                        // var currentZoom = map.getZoom();
                        // controlDiv.innerHTML = "地图缩放级别：" + currentZoom;
                        // qq.maps.event.trigger(controlDiv, "resize");
                    }

                    update();
                    //添加dom监听事件  一旦zoom的缩放级别放生变化则出发update函数
                    qq.maps.event.addDomListener(controlDiv, "click", update);
                }

                var customZoomDiv = document.createElement("div");
                //获取控件接口设置控件
                var customZoomControl = new CustomZoomControl(customZoomDiv, map);
                //将控件添加到controls栈变量并将其设置在顶部位置
                map.controls[qq.maps.ControlPosition.BOTTOM_RIGHT].push(customZoomDiv);
            }, 200);
        },

        getbusinessCircles() {
            //获取工商信息
            axios.get(this.$baseURL + '/api/mobile/personnelOwner/getBusinessAdministration', {
                params: {
                    enterpriseCertificationId: this.companyInformation.id,
                    keyword: this.companyInformation.unifiedSocialCreditCode,
                }

            }).then((res) => {
                res = res.data
                this.businessCirclesData = res.businessAdministration || {};
            });

        },
        handlerCurrentChange(e) {
            this.pageNo = e;
            this.getRecruitmentPosition();
        },
        async getData(flag) {
            await this.$getHttp("/api/mobile/public/getCompanyInformationByUserId", {
                userId: this.uid,
            }).then((res) => {
                // 获取个人的信息
                this.personalInformation = res.userCompanyInformation;
                // 获取公司信息
                if (res.userCompanyInformation.businessType == 2) {
                    this.companyInformation = res.userCompanyInformation.distributorDto;
                } else if (res.userCompanyInformation.businessType == 1) {
                    this.companyInformation = res.userCompanyInformation.shopInfo;
                } else {
                    this.companyInformation =
                        res.userCompanyInformation.enterpriseCertification;
                }

                // 地址
                if (this.companyInformation.latitude) {
                    this.initMap();
                }
                // 判断是店铺还是公司
                if (
                    res.userCompanyInformation.businessType == 0 ||
                    !res.userCompanyInformation.businessType
                ) {
                    // 公司
                    this.dianpuChage = 2;
                    this.getdynamicList2();
                    this.getbusinessCircles();
                } else {
                    this.dianpuChage = 1;

                    this.$getHttp("/mob/user/getArticleInfo", {
                        pageNo: 1,
                        pageSize: 999,
                        businessType: res.userCompanyInformation.businessType || 1,
                        shopId: this.companyInformation.id,
                        type: 2,
                    }).then((res) => {
                        res.list.forEach((v) => {
                            if (v.remarks == 2) {
                                this.swiperVideo = v.image;
                            } else {
                                this.carouselList.push({
                                    id: v.id,
                                    image: v.image,
                                });
                            }
                        });
                        this.carouselList = res.list;
                    });
                }
                // 获取工商信息
                // this.getbusinessCircles();
                // 在招职位
                this.getRecruitmentPosition();
            });
        },
        // 获取公司环境
        GSpicturesHQ() {
            let businessType =
                this.personalInformation.businessType == 0 ||
                    !this.personalInformation.businessType
                    ? "4"
                    : this.personalInformation.businessType;
            this.$getHttp("/api/mobile/public/getCompanyEnvironmentTabulation", {
                businessType: businessType,
                companyId: this.uid,
            }).then((data) => {
                this.companyInformationList = []
                data.companyEnvironmentTabulation.forEach((v) => {
                    if (v.auditStatus == 1) {
                        this.companyInformationList.push(v);
                    }
                });
            });
        },
        // 获取公司介绍
        GSintroduceHQ() {
            let businessType =
                this.personalInformation.businessType == 0 ||
                    !this.personalInformation.businessType
                    ? "4"
                    : this.personalInformation.businessType;
            this.$getHttp("/api/mobile/public/getCompanyIntroductionTabulation", {
                businessType: businessType,
                companyId: this.uid,
            }).then((data) => {
                if (data.companyEnvironmentTabulation.length) {
                    this.companyProfileData = data.companyEnvironmentTabulation[0];
                }
            });
        },
        // 获取企业性质
        qyxz(index) {
            if (index == 1) {
                return "社会组织";
            } else if (index == 3) {
                return "中国香港公司";
            } else if (index == 4) {
                return "事业单位";
            } else if (index == 5) {
                return "中国台湾公司";
            } else if (index == 6) {
                return "基金会";
            } else if (index == 7) {
                return "医院";
            } else if (index == 8) {
                return "海外公司";
            } else if (index == 9) {
                return "律师事务所";
            } else if (index == 10) {
                return "学校";
            } else if (index == 11) {
                return "机关单位";
            } else if (index == 0) {
                return "大陆企业";
            } else {
                return "其他";
            }
        },
    },
    async created() {
        if (JSON.parse(localStorage.getItem('userInfo'))) {
            this.uid = JSON.parse(localStorage.getItem('userInfo')).id

            this.getUser();
            await this.getData();

            this.GSintroduceHQ();
        }

    },
    mounted() { },
};
</script>
  
<style lang="less" scoped>
.moban-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    color: #333;
}

.moban {
    display: inline-block;
    vertical-align: top;
    width: 793px;
    padding-top: 24px;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    position: relative;

    .moban-flex {
        display: flex;
    }

    .moban-title {
        height: 40px;
        font-size: 28px;
        font-weight: 500;
        color: #333333;
        align-items: center;

        .moban-btn {
            cursor: pointer;
            width: 102px;
            margin-left: 20px;
            text-align: center;
            height: 35px;
            line-height: 35px;
            border-radius: 2px 2px 2px 2px;
            opacity: 1;
            border: 1px solid #64b6a8;
            font-size: 22px;
            font-weight: 400;
            color: #64b6a8;
        }
    }

    .moban-span {
        margin-top: 10px;
        height: 28px;
        font-size: 20px;
        font-weight: 500;
        color: #666666;
        line-height: 28px;

        span {
            margin-right: 14px;
        }
    }

    .moban-main {
        opacity: 1;
        // display: flex;
        padding-top: 48px;
        white-space: nowrap;

        // position: relative;
        .company-list {
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .company-img {
                width: 318px;
                height: 180px;
                background: #d9d9d9;
                border-radius: 16px 16px 16px 16px;
                opacity: 1;
                margin-bottom: 20px;
                object-fit: cover;
            }
        }

        .moban-left {
            display: inline-block;
            vertical-align: top;
            width: 640px;
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            // border: 1px solid #dcdcdc;
            // padding: 20px 30px;
            box-sizing: border-box;
            min-height: 600px;

            .moban-content-wrap {
                overflow: hidden;
                position: relative;

                .moban-content {
                    scrollbar-width: none;
                    /* firefox */
                    -ms-overflow-style: none;

                    /* IE 10+ */
                    &::-webkit-scrollbar {
                        display: none;
                        /* Chrome Safari */
                    }
                }
            }

            .moban-tab {
                font-size: 24px;
                font-weight: 500;
                color: #333333;
                line-height: 34px;

                .moban-tab-title {
                    display: flex;

                    .active {
                        color: #64b6a8;
                    }

                    div {
                        margin-right: 100px;
                    }
                }
            }

            .moban-tab-content {
                padding-top: 30px;
            }

            .moban-sub-title {
                margin-top: 11px;
                height: 34px;
                font-size: 24px;
                font-weight: 500;
                color: #000000;
                line-height: 34px;

                strong {
                    font-weight: 600;
                }
            }

            .moban-flex {
                display: flex;

                .flex-4 {
                    flex: 4;
                }

                .flex-3 {
                    flex: 3;
                }

                .flex-2 {
                    flex: 2;
                }
            }

            .moban-label {
                margin-top: 20px;
                font-weight: 500;
                color: #333333;
            }

            .moban-value {
                margin-top: 10px;
                color: #666666;
                font-weight: 400;
            }

            .view-more {
                padding: 32px 0;
                text-align: center;
                color: #333333;
                background-color: #fff;
                cursor: pointer;
            }

            .moban-area {
                width: 640px;
                height: 322px;
                margin-bottom: 76px;
                border-radius: 8px 8px 8px 8px;
                opacity: 1;
                overflow: hidden;
            }
        }
    }
}

.moban-right {
    // position: absolute;
    margin: 20px 0;
    top: 20px;
    display: inline-block;
    padding-left: 20px;
    width: 333px;

    .moban-sub-title {
        height: 34px;
        font-size: 24px;
        font-weight: 500;
        color: #333333;
        line-height: 34px;

        strong {}
    }

    .moban-user {
        display: flex;

        .user-left {
            height: 98px;
            position: relative;

            img {
                width: 80px;
                height: 80px;
                background: #d9d9d9;
                opacity: 1;
                border-radius: 50%;
            }

            .user-tag {
                position: absolute;
                bottom: 0;
                transform: translateX(-50%);
                left: 50%;
                width: 60px;
                height: 25px;
                background: #64b6a8;
                border-radius: 4px 4px 4px 4px;
                opacity: 1;
                text-align: center;
                font-size: 20px;
                font-weight: 400;
                color: #ffffff;
                line-height: 25px;
            }
        }

        .user-right {
            flex: 1;
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            height: 98px;

            .user-name {
                flex: 1;
                display: flex;
                align-items: center;
                font-size: 24px;
                font-weight: 400;
                color: #333333;
            }

            .user-company {
                height: 25px;

                font-size: 20px;
                font-weight: 400;
                color: #666666;
                line-height: 25px;
            }
        }
    }

    .moban-operate {
        margin-top: 16px;
        display: flex;

        .moban-operate-item {
            cursor: pointer;
            margin-right: 44px;

            img {
                width: 36px;
                height: 36px;
                border-radius: 0px 0px 0px 0px;
                opacity: 1;
            }

            .moban-operate-label {
                text-align: center;
                margin-bottom: 14px;
                margin-top: 4px;
            }
        }

        .moban-operate-item {
            img {}

            .moban-operate-label {}
        }
    }

    .but {
        margin-top: 26px;
        display: flex;
        margin-bottom: 26px;

        div {
            position: relative;
            display: inline-block;
            //width: 153px;
            height: 51px;
            border-radius: 4px;
            overflow: hidden;
            text-align: center;
            line-height: 51px;
            text-indent: 50px;
            color: #fff;
            margin-right: 15px;

            img {
                position: absolute;
                width: 33px;
                height: 33px;
                top: 9px;
                left: 25px;
            }
        }

        p {
            margin-left: 10px;
        }

        .but_1 {
            cursor: pointer;
            padding-right: 20px;
            background: rgba(100, 182, 168, 0.14);
            color: #64b6a8;
        }

        .but_2 {
            cursor: pointer;
            padding-right: 20px;
            background: #64b6a8;
        }
    }

    .invite-title {
        height: 34px;
        font-size: 24px;
        font-weight: 500;
        color: #333333;
        line-height: 34px;
    }

    .tag-list {
        padding-top: 12px;
        padding-bottom: 20px;
        overflow: hidden;
        // display: inline-flex;
        width: 306px;
        position: relative;

        .tag-item {
            // flex-shrink: 0;
            display: inline-block;
            vertical-align: middle;

            margin-right: 10px;
            position: relative;
            position: relative;
            background-color: #fff;
            padding: 0 7px;
            height: 24px;
            line-height: 24px;
            border-radius: 2px 2px 2px 2px;
            opacity: 1;
            border: 1px solid #999999;
            font-size: 14px;
            font-weight: 400;
            color: #999999;

            // z-index: -1;
            // .tag-item-text {
            //   z-index: 2;

            // }

            // &::before {
            //   content: '...';
            //   border: 1px solid #333;
            //   position: absolute;
            //   left: 0;
            //   // z-index: -1;
            //   top: 0;
            //   background-color: #ffffff;
            // }
        }
    }

    .moban-salary {
        height: 45px;
        font-size: 30px;
        font-weight: 400;
        color: #e00000;
        line-height: 45px;
    }

    .invite-user-mark {
        margin-top: 4px;
        display: flex;
        align-items: center;

        .marks {
            font-size: 18px;
            font-weight: 400;
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: center;

            &:last-child {
                .marks-seperate {
                    display: none;
                }
            }

            .marks-seperate {
                width: 2px;
                height: 25px;
                opacity: 1;
                background-color: #999999;
                margin: 0 10px;
            }
        }
    }
}
</style>
  